<template>
  <div class="bidding">
    <div class="mailDialog-module">
      <el-dialog
        :title="$t('bidding.email')"
        :visible.sync="mailDialogVisible"
        custom-class="bidding-dialog"
        width="900px">
        <div class="key-div">
          <div class="key-word">
            <div class="type-title">{{$t('bidding.keyWords')}}:</div>
            <div class="fr-div">
              <span class="type-item" v-for="(item, index) in keyWords" :class="{'type-selected': false}">{{item}}</span>
            </div>
          </div>
        </div>
        <!--<div class="mail-div">-->
          <!--<span style="margin-right: 40px; color: #000; font-size: 16px; font-weight: bold">{{$t('bidding.receiveEmial')}}:</span>-->
          <!--<el-input-->
            <!--:placeholder="$t('bidding.please')"-->
            <!--v-model="mailAddress"-->
            <!--clearable>-->
          <!--</el-input>-->
        <!--</div>-->
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="mailDialogVisible = false">{{$t("bidding.submit")}}</el-button>
          <div style="color: #f33; font-size: 14px; margin-top: 20px;">*{{$t('bidding.please')}}</div>
        </span>
      </el-dialog>
    </div>
    <div class="detailDialog-module">
      <el-dialog
        :visible.sync="detailDialogVisible"
        custom-class="bidding-dialog"
        width="90%">
        <span slot="title" class="dialog-title">
          <i class="iconfont icon-xingxing1 fs27" :class="{'collection-detail': collectionDetail === 1}" @click="addCollection(collectionDetail)"></i>添加收藏
        </span>
        <div class="content">
          <!--这里写详细内容...-->
          <!--<template v-for="(item, index) in detailContent">-->
            <!--<div v-html="item"></div>-->
          <!--</template>-->
          <div style="font-size: 20px; font-weight: bold; margin-bottom: 20px;">{{detailTitle}}</div>
          <!--<div ref="module"></div>-->
          <div v-html="detailContent"></div>
        </div>
        <!--<span slot="footer" class="dialog-footer">-->
          <!--<el-button type="primary" @click="detailDialogVisible = false">提 交</el-button>-->
        <!--</span>-->
      </el-dialog>
    </div>
    <div class="title-module">
      <h2>{{$t('bidding.biddingTitle')}}</h2>
      <p>
        <span @click="showMailDialog">{{$t('bidding.email')}}</span> <span>|</span>
        <span @click="jumpCollection">{{$t('bidding.myCollection')}}</span>
      </p>
    </div>
    <div class="search-module">
      <div class="input-div">
        <el-input v-model.trim="searchValue" @keyup.enter.native="handleSearch(searchValue)">
          <el-button slot="append" icon="el-icon-search" @click="handleSearch(searchValue)"></el-button>
        </el-input>
      </div>
      <div class="tag-div">
        <span v-for="(item, index) in searchTipsTag" class="tag-item" @click="handleSearch(item)">{{item}}</span>
        <span v-show="searchTipsTag.length !== 0 && searchTipsTag[0] !== ''" class="delete" @click="deleteAll">{{$t('bidding.delete')}}</span>
      </div>
      <div class="key-div">
        <div class="key-word">
          <div class="type-title">{{$t('bidding.keyWords')}}:</div>
          <div class="fr-div">
            <span class="type-item" v-for="(item, index) in keyWords" :class="{'type-selected': keyWordsParams.indexOf(item) !== -1}" @click="selectedType(item)">{{item}}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="select-module">
      <el-row>
        <el-col :span="6">
          <div class="child-module">
            <span>{{$t('bidding.type')}}</span>
            <el-select v-model="announcementValue" clearable multiple collapse-tags>
              <el-option
                v-for="item in announcementOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
        </el-col>
        <!--<el-col :span="6" :offset="0">-->
          <!--<div class="child-module">-->
            <!--<span>{{$t('bidding.region')}}</span>-->
            <!--<el-cascader-->
              <!--expand-trigger="hover"-->
              <!--:options="regionOptions"-->
              <!--:show-all-levels="false"-->
              <!--v-model="regionValue"-->
              <!--:placeholder="$t('bidding.placeholder2')"-->
              <!--:clearable="true"-->
              <!--separator="-"-->
              <!--@change="handleChange">-->
            <!--</el-cascader>-->
          <!--</div>-->
        <!--</ebiddingl-col>-->
        <el-col :span="6" :offset="0">
          <div class="child-module region-div" v-clickoutside="handleClickOutSide">
            <span>{{$t('bidding.region')}}</span>
            <el-input @click.native="handleShowTree" v-model="treeValue" :disabled="true" :placeholder="$t('bidding.regionPlease')">
              <i
                class="el-select__caret el-input__icon" :class="iconArrow"
                slot="suffix">
              </i>
            </el-input>
            <el-tree
                :class="{show: showTree}"
                :data="regionDatas"
                show-checkbox
                node-key="label"
                ref="tree"
                :placeholder="$t('bidding.placeholder2')"
                check-strictly
                @check-change="getTreeState">
              </el-tree>
          </div>
        </el-col>
        <el-col :span="10" :offset="0">
          <div class="child-module">
            <span>{{$t('bidding.time')}}</span>
            <el-date-picker
              v-model="timeRange"
              type="daterange"
              value-format="yyyyMMdd"
              :range-separator="$t('bidding.to')"
              :start-placeholder="$t('bidding.startTime')"
              :end-placeholder="$t('bidding.endTime')">
            </el-date-picker>
          </div>
        </el-col>
        <el-col :span="2" :offset="0">
          <el-button type="primary" @click="resetFilterSearch()">{{$t('bidding.filter')}}</el-button>
        </el-col>
      </el-row>
    </div>
    <BiddingItem @getDetail="showDetail" :propsData="biddingItems" v-loading="showLoading"></BiddingItem>
    <div class="paging-module" v-if="biddingItems.length !== 0 && paginationFlag">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPageValue"
        :page-sizes="[20, 50, 100, 200]"
        :page-size="showNum"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import BiddingItem from './components/biddingItem'
  import clickoutside from './clickoutside'

  export default {
    components: {
      BiddingItem
    },
    directives: {
      'clickoutside': clickoutside
    },
    data() {
      return {
        paginationFlag: false, // 分页初始化时不展示
        treeValue: '',
        showTree: false, //树形控件展示与否
        iconArrow: 'el-icon-arrow-down', //输入框尾部图标
        presentIndex: null,
        showLoading: false,
        mailAddress: '',
        searchValue: '', // 搜索框的值
        mailDialogVisible: false, // 弹框
        detailDialogVisible: false,
        collectionDetail: 0, // 收藏
        searchTipsTag: [],
        typeData: [
          {
            value: '笔记本',
            belong: 'IDG',
            flag: false
          },
          {
            value: '台式机',
            belong: 'IDG',
            flag: false
          },
          {
            value: '手机',
            belong: 'IDG',
            flag: false
          },
          {
            value: '显示器',
            belong: 'IDG',
            flag: false
          },
          {
            value: '平板',
            belong: 'IDG',
            flag: false
          },
          {
            value: '打印机',
            belong: 'IDG',
            flag: false
          },
          {
            value: '电视机',
            belong: 'IDG',
            flag: false
          },
          {
            value: '工作站',
            belong: 'DCG',
            flag: false
          },
          {
            value: '服务器',
            belong: 'DCG',
            flag: false
          },
          {
            value: '存储',
            belong: 'DCG',
            flag: false
          }
        ],
        selectNotBelong: '',
        selectedTypeData: [],
        announcementValue: [],// 公告
        announcementOptions: [],
        regionValue: [], // 地区
        regionValueParams: [], // 拼接格式后的地区
        regionOptions: [],
        regionDatas: [
          {
            label: '北京',
            children: [
              {
                label: '北京市',
                value: '哈哈',
                children: [
                  {
                    label: '昌平区'
                  },
                  {
                    label: '海淀区'
                  }
                ]
              },
              {
                label: '东城区'
              }
            ]
          },
          {
            label: '安徽',
            children: [{
              label: '二级 2-1',
              children: [{
                label: '三级 2-1-1'
              }]
            }, {
              label: '二级 2-2',
              children: [{
                label: '三级 2-2-1'
              }]
            }]
          }, {
            label: '一级 3',
            children: [{
              label: '二级 3-1',
              children: [{
                label: '三级 3-1-1'
              }]
            }, {
              label: '二级 3-2',
              children: [{
                label: '三级 3-2-1'
              }]
            }]
          }
        ],
        timeRange: [],
        // 分页
        currentPageValue: 1,
        totalCount: null,
        showNum: 20,
        // bu状态
        buState: null,
        biddingItems: [], // 搜索结果
        keyWords: [], // 关键词
        keyWordsParams: [],
        detailContent: '', //详细内容弹框里的内容
        detailTitle: '',
        detailParams: {} //传过来的详情参数
      }
    },
    methods: {
      handleClickOutSide() {
        this.showTree = false
      },
      handleShowTree() {
        this.showTree = !this.showTree
        if(this.showTree){
          this.iconArrow = 'el-icon-arrow-up'
        }else{
          this.iconArrow = 'el-icon-arrow-down'
        }
      },
      getTreeState(dataObj, state, have) {
        console.log(this.$refs.tree.getCheckedNodes())
        let currentStates = this.$refs.tree.getCheckedNodes()
        let arr = []
        if (currentStates .length) {
          arr = currentStates.map(item => {
            return item.label
          })
          this.regionValueParams = arr
          this.treeValue = arr.join()
        } else {
          this.treeValue = ''
          this.regionValueParams = []
        }
      },
      showMailDialog() {
        this.mailDialogVisible = true
      },
      jumpCollection() {
        this.$router.push({path:'MyCollection'})
      },
      changeBu(num) {
        if (num === this.buState) {
          return
        } else {
          this.buState = num
          if (this.buState === 1) {
            this.selectNotBelong = 'DCG'
          } else {
            this.selectNotBelong = 'IDG'
          }
        }
      },
      selectedType(item) {
        let num = this.keyWordsParams.indexOf(item)
        if (num === -1) {
          console.log('没有')
          this.keyWordsParams.push(item)
        } else {
          this.keyWordsParams.splice(num, 1)
          // console.log('有了')
        }
        this.handleSearch()

        // if (item.belong !== this.selectNotBelong) {
        //   // 点的是可以操作的
        //   item.flag = !item.flag
        //   if (item.flag) {
        //     this.selectedTypeData.push(item)
        //   } else {
        //     for (let i in this.selectedTypeData) {
        //       if (this.selectedTypeData[i].value === item.value) {
        //         this.selectedTypeData.splice(i, 1)
        //       }
        //     }
        //   }
        // } else {
        //   // 点的是不可以操作的
        //   console.log('不做处理')
        //   return
        // }
        // console.log('已选数组')
        // console.log(this.selectedTypeData)
      },
      showDetail(params) {
        // console.log(`子组件传过来的公司名称值${params.uuid}`)
        // console.log(params)
        this.detailParams = params
        this.collectionDetail = params.collect
        this.loadDetail(params.uuid)
        this.detailTitle = params.title
        this.detailDialogVisible = true
      },
      async addCollection(index) {
        // console.log(index)
        this.collectionDetail = index === 1 ? 0 : 1
        let params = {
          bulletin_id: this.detailParams.uuid,
          bulletin_name: this.detailParams.title,
          bulletin_type: this.detailParams.status,
          region: this.detailParams.area_name,
          publish_time: this.detailParams.publish_date
        }
        let res = await this.axios.post('bidding/addAndDeleteCollection', params)
        this.handleSearch(this.searchValue)
        if (this.collectionDetail === 1) {
          this.$message({
            message: '收藏成功',
            type: 'success',
            duration: 1000
          })
        } else {
          this.$message({
            message: '取消收藏',
            type: 'info',
            duration: 1000
          })
        }
      },
      handleChange(params) {
        console.log(params)
        if (params.length !== 0) {
          let paramsStr = `${params[0]}-${params[1]}-${params[2]}`
          this.regionValueParams = [paramsStr]
        } else {
          this.regionValueParams = []
        }
        console.log(this.regionValueParams)
      },
      handleSizeChange(params) {
        // console.log(params)
        this.showNum = params
        this.filterSearch() // 不能用handleSearch，因为要保留筛选状态。
        window.scrollTo(0, 330)
      },
      handleCurrentChange(params) {
        // console.log(params)
        this.currentPageValue = params
        this.filterSearch()
        window.scrollTo(0, 330)
      },
      // api接口
      // 搜索接口
      async handleSearch(search_value = this.searchValue, keywords = this.keyWordsParams, status = [], area_name = [], publish_date = []) {
        this.searchValue = search_value
        this.currentPageValue = 1
        this.showNum = 20
        // if (this.searchValue !== '') {
        if (true) {
          this.showLoading = true
          // 置空
          this.announcementValue = []
          this.regionValueParams = []
          this.treeValue = ''
          this.regionValue = []
          this.timeRange = []
          this.$refs.tree.setCheckedKeys([])
          // this.$refs.tree.setCheckedNodes([])
          // this.keyWordsParams = []
          let params = {
            search_value: this.searchValue,
            keywords,
            status,
            area_name,
            publish_date,
            page: this.currentPageValue,
            pageSize: this.showNum
          }
          // console.log(params)
          let res = await this.axios.post('bidding/search', params)
          // console.log('哈哈')
          // console.log(res)
          if (res.data.data.count) {
            this.totalCount = res.data.data.count
            this.biddingItems = res.data.data.rows
            this.paginationFlag = true
            // console.log('哈哈')
            // console.log(this.biddingItems)
          } else {
            console.log('搜索结果为0')
          }
          this.handleHistorySearch()
          this.showLoading = false
        }
      },
      async filterSearch(search_value = this.searchValue, keywords = this.keyWordsParams, status = this.announcementValue, area_name = this.regionValueParams, publish_date = this.timeRange) {
        this.searchValue = search_value
        // if (this.searchValue !== '') {
          this.showLoading = true
          let params = {
            search_value: this.searchValue,
            keywords,
            status,
            area_name,
            publish_date,
            page: this.currentPageValue,
            pageSize: this.showNum
          }
          // console.log(params)
          let res = await this.axios.post('bidding/search', params)
          // console.log('哈哈')
          // console.log(res)
          if (res.data.data.count) {
            this.totalCount = res.data.data.count
            this.biddingItems = res.data.data.rows
            // console.log('哈哈')
            // console.log(this.biddingItems)
          } else {
            console.log('搜索结果为0')
            this.biddingItems = res.data.data.rows
          }
          this.paginationFlag = true
          // this.handleHistorySearch()
          this.showLoading = false
        // }
      },
      async resetFilterSearch(search_value = this.searchValue, keywords = this.keyWordsParams, status = this.announcementValue, area_name = this.regionValueParams, publish_date = this.timeRange) {
        // console.log('选中的树控件的值')
        // console.log(this.$refs.tree.getCheckedNodes())
        this.searchValue = search_value
        this.currentPageValue = 1
        this.showNum = 20
        if (this.searchValue !== '') {
          this.showLoading = true
          let params = {
            search_value: this.searchValue,
            keywords,
            status,
            area_name,
            publish_date,
            page: this.currentPageValue,
            pageSize: this.showNum
          }
          // console.log(params)
          let res = await this.axios.post('bidding/search', params)
          // console.log('哈哈')
          // console.log(res)
          if (res.data.data.count) {
            this.totalCount = res.data.data.count
            this.biddingItems = res.data.data.rows
            // console.log('哈哈')
            // console.log(this.biddingItems)
          } else {
            console.log('搜索结果为0')
            this.biddingItems = res.data.data.rows
          }
          // this.handleHistorySearch()
          this.showLoading = false
        }
      },
      // 搜索历史接口
      async handleHistorySearch() {
        let res = await this.axios.post('user/get_keyword.do', {
          flag: 3
        })
        // console.log('搜索历史接口')
        // console.log(res)
        let resData = res.data.data
        resData = resData.filter(item => {
          return item !== ''
        })
        this.searchTipsTag = resData
      },
      async deleteAll() {
        let res = await this.axios.post('search/delMoreSearchHistory.do', {flag: 3})
        this.handleHistorySearch()
      },
      // 公告类型
      async loadAnnouncementOptions() {
        let res = await this.axios.post('bidding/tabControl')
        let resData = res.data.data
        // console.log('公告类型')
        // console.log(resData)
        this.announcementOptions = resData.status.map(item => {
          return { value: item, label: item }
        })
        this.keyWords = resData.keywords
      },
      // 地区
      async loadRegionOptions() {
        let res = await this.axios.post('bidding/selectRegionAll', {})
        console.log('地区')
        console.log(res)
        let resData = res.data.data
        if (resData.length !== 0) {
          this.regionOptions = resData
          this.regionDatas = resData
        } else {
          console.log('地区数据为0')
        }
      },
      async loadDetail(idParmas) {
        let res = await this.axios.post('bidding/bidDetail', {
          id: idParmas
        })
        console.log(res)
        let resData = res.data.data
        console.log(resData)
        this.detailContent = resData.content_html
      },
      // 初始化详情接口
      async initDetialData() {
        this.showLoading = true
        let params = {
          page: this.currentPageValue,
          pageSize: this.showNum
        }
        let res = await this.axios.post('/bidding/bidNews', params)
        let resData = res.data.data
        this.totalCount = resData.count
        this.biddingItems = resData.rows
        this.paginationFlag = false // 隐藏分页组件
        this.showLoading = false
      }
    },
    created() {
      this.initDetialData()
    },
    mounted() {
      this.handleHistorySearch()
      this.loadAnnouncementOptions()
      this.loadRegionOptions()
    }
  }
</script>

<style lang="scss" scoped>
  .bidding {
    padding: 15px 41px;
    .mailDialog-module {
      .key-div {
        margin-top: 30px;
        .type-selected {
          background-color: #0099ff;
          color: #fff!important;
          border-radius: 10px;
          padding: 2px 8px;
          box-sizing: content-box;
        }
        .not-allowed {
          background-color: #f4f4f5!important;
          color: #bcbecc!important;
          cursor: not-allowed!important;
        }
        .type-title {
          display: inline-block;
          width: 100px;
          font-size: 16px;
          /*font-size: 12px;*/
          color: #000;
          font-family: Arial-BoldMT;
          font-weight: bold;
        }
        .type-item {
          display: inline-block;
          /*width: 60px;*/
          height: 20px;
          line-height: 20px;
          text-align: center;
          /*margin-right: 45px;*/
          margin-right: 20px;
          margin-bottom: 20px;
          border-radius: 10px;
          font-size: 12px;
          color: #999;
          font-family: MicorsoftYaHei;
          cursor: pointer;
          // 禁止选中文本
          -moz-user-select:none;/*火狐*/
          -webkit-user-select:none;/*webkit浏览器*/
          -ms-user-select:none;/*IE10*/
          -khtml-user-select:none;/*早期浏览器*/
          user-select:none;
        }
        .key-word {
          &:after {
            clear: both;
            content: '';
            display: block;
          }
          .type-title {
            float: left;
          }
          .fr-div {
            float: right;
            margin-left: 50px;
          }
        }
      }
      .mail-div {
        /*margin-left: 30px;*/
        clear: both;
        .el-input {
          /*width: 374px;*/
          /*width: 455px;*/
          width: 490px;
        }
      }
    }
    .detailDialog-module {
      .dialog-title {
        .collection-detail {
          color: #f0ba00;
        }
      }
      .content {
        font-size: 14px;
        font-family: MicorsoftYaHei;
        color: #666;
        text-align: left;
        /*以下所有样式均为配套爬虫数据*/
        /deep/ #wen{
          table {
            width: 100%;
          }
        }
      }
    }
    .title-module {
      margin-bottom: 20px;
      h2, p {
        margin: 0;
        padding: 0;
      }
      h2 {
        display: inline-block;
        font-size: 20px;
        font-family: OpenSansShin;
        color: #333;
      }
      p {
        display: inline-block;
        margin-top: 7px;
        float: right;
        span {
          color: #0090e9;
          font-family: MicorsoftYaHei;
          font-size: 16px;
          cursor: pointer;
        }
      }
    }
    .search-module {
      background-color: #fff;
      /*height: 222px;*/
      min-height: 222px;
      padding: 20px 30px;
      box-shadow: 2px 2px 10px rgba(224, 226, 234, 0.6);
      border-radius: 6px;
      .input-div {
        width: 400px;
        height: 40px;
        .el-input {
          .el-input-group__append {
            background-color: #0099ff!important;
          }
        }
      }
      .tag-div {
        margin-top: 15px;
        color: #333;
        font-size: 12px;
        font-family: MicorsoftYaHei;
        .tag-item {
          margin-right: 30px;
          cursor: pointer;
          font-size: 12px;
          color: #333;
          display: inline-block;
          margin-bottom: 5px;
        }
        .delete {
          color: #0090e9;
          font-size: 12px;
          text-decoration: underline;
          cursor: pointer;
        }
      }
      .key-div {
        margin-top: 30px;
        .type-selected {
          background-color: #0099ff;
          color: #fff!important;
          border-radius: 10px;
          padding: 2px 8px;
          box-sizing: content-box;
        }
        .not-allowed {
          background-color: #f4f4f5!important;
          color: #bcbecc!important;
          cursor: not-allowed!important;
        }
        .type-title {
          display: inline-block;
          width: 100px;
          /*font-size: 16px;*/
          font-size: 12px;
          color: #333;
          font-family: Arial-BoldMT;
          font-weight: bold;
        }
        .type-item {
          display: inline-block;
          /*width: 60px;*/
          height: 20px;
          line-height: 20px;
          text-align: center;
          /*margin-right: 45px;*/
          margin-right: 20px;
          margin-bottom: 20px;
          border-radius: 10px;
          font-size: 12px;
          color: #999;
          font-family: MicorsoftYaHei;
          cursor: pointer;
          // 禁止选中文本
          -moz-user-select:none;/*火狐*/
          -webkit-user-select:none;/*webkit浏览器*/
          -ms-user-select:none;/*IE10*/
          -khtml-user-select:none;/*早期浏览器*/
          user-select:none;
        }
        .key-word {
          &:after {
            clear: both;
            content: '';
            display: block;
          }
          .type-title {
            float: left;
          }
          .fr-div {
            float: right;
            margin-left: 50px;
          }
        }
      }
    }
    .select-module {
      background-color: #fff;
      height: 92px;
      margin-top: 20px;
      padding: 30px;
      box-shadow: 2px 2px 10px rgba(224, 226, 234, 0.6);
      border-radius: 6px;
      .child-module {
        /*display: inline-block;*/
        position: relative;
        .el-select, .el-cascader {
          /*width: 130px;*/
          width: 150px;
        }
        .el-tree {
          position: absolute;
          left: 50px;
          top: 50px;
          z-index: 2;
          width: 80%;
          height: 160px;
          overflow: auto;
          border: 1px solid #dfe4ed;
          border-radius: 4px;
          box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
          display: none;
        }
        span {
          margin-right: 20px;
        }
      }
      .region-div {
        .el-input {
          width: 150px;
        }
      }
      .show {
        display: block!important;
      }
    }
    .paging-module {
      margin-top: 80px;
      text-align: center;
    }
  }
</style>
